;(function () {
    // 获取WEB存储 
    let city_name = localStorage.getItem('city_name') || '请手动选择'
    $('.city .choose-city').html(city_name)
    // 切换城市移入显示
    $('.area .change-city').mouseover(function () {
        $('.area .box').show()
    })
    // 切换城市移出隐藏
    $('.area').mouseleave(function () {
        $('.area .box').hide()
    })
    // 标题特效
    $('.tab li').click(function () {
        let index = $(this).index()
        // 标题
        $(this).siblings().removeClass('cur')
        $(this).addClass('cur')
        // 内容
        $('.tab-content').hide()
        $('.tab-content').eq(index).show()
    })
    // 内容特效
    $('.tab-content').on('click', 'a', function () {
        // 数据
        let title = $(this).text()
        let index = $(this).parents('.tab-content').index()
        // 当前选中
        $('.tab-content')
            .eq(index - 1)
            .find('.city')
            .removeClass('cur')
        $(this).parents('.city').addClass('cur')
        // 标题
        $('.tab li')
            .eq(index - 1)
            .text(title)
        if (index == 3) return
        $('.tab li').removeClass('cur')
        $('.tab li').eq(index).addClass('cur')
        // 下一个显示
        $('.tab li').eq(index).show()
        $('.tab-content')
            .eq(index - 1)
            .hide()
        $('.tab-content').eq(index).show()
    })
    // 内容选中
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        $('.area .box').hide()
    })
    // 选择存储
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        localStorage.setItem('city_name', title)
        localStorage.setItem('city_id', areaId)
        // $('.city .choose-city').html(title)
        location.reload()
    })
})()




//默认省份数据
$.get('/api/area/index.jsp',{type:'一级',pid:1},res=>{
  let html='';
  $.each(res.data,(index,item)=>{
    html+=`<div class='city' area-id='${item.area_id}'>
        <a href='javascript:;'>${item.area_name}</a><span>-</span>
        </div>
      `
  })
  $('.tab-content:eq(0)').html(html)
},'json')

//后续城市数据
 $('.area .tab-content').on('click','a',function(){
   let index=$(this).parents('.tab-content').index();
   if([1,2].indexOf(index)===-1)return
   let type=['二级','三级'][index-1]
   let pid=$(this).parents('.city').attr('area-id');

   $.get('/api/area/index.jsp',{type,pid},res=>{
    let html='';
    $.each(res.data,(index,item)=>{
      html+=`<div class='city' area-id='${item.area_id}'>
          <a href='javascript:;'>${item.area_name}</a><span>-</span>
          </div>
        `
    })
    $(`.tab-content:eq(${index})`).html(html)
   },'json')
 })

